<!-- 转售记录列表页面 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转售记录列表</title>
    <!-- 引入 Tailwind CSS 和字体图标 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 页面整体样式 */
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #003366 0%, #0099cc 30%, #66ccff 70%, #99ffff 100%);
        }

        /* 卡片样式 */
        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1200px;
            padding: 40px;
        }

        /* 表格容器样式 */
        .table-container {
            overflow-x: auto;
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        th,
        td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            background-color: #f8fafc;
            font-weight: 600;
            color: #1e293b;
        }

        tr:hover {
            background-color: #f8fafc;
        }

        /* 返回按钮样式 */
        .btn-back {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            margin-top: 30px;
        }

        .btn-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        /* 空状态样式 */
        .empty-state {
            padding: 40px;
            text-align: center;
            color: #64748b;
        }

        /* 令牌单元格样式 */
        .token-cell {
            font-family: monospace;
            color: #3b82f6;
        }
    </style>
</head>

<body>
    <div class="card">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">转售记录列表</h1>

        <!-- 转售记录表格 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>买家电话</th>
                        <th>原始令牌</th>
                        <th>新令牌</th>
                        <th>转售时间</th>
                        <th>权限百分比</th>
                        <th>允许转售级数</th>
                        <th>规定使用天数</th>
                    </tr>
                </thead>
                <tbody>
                    {% if resale_records %}
                    {% for record in resale_records %}
                    <tr>
                        <td>{{ record.buyer_phone }}</td>
                        <!-- 原始令牌只显示前10位 -->
                        <td class="token-cell">{{ record.authorization_token.original_token|slice:':10' }}...</td>
                        <!-- 新令牌只显示前20位，点击可复制 -->
                        <td class="token-cell" onclick="copyToken('{{ record.new_authorization_token }}')"
                            style="cursor:pointer" title="点击复制">{{ record.new_authorization_token|slice:':20' }}...
                            <span style='color:#007bff;'>(复制)</span>
                        </td>
                        <td>{{ record.resale_time|date:"Y-m-d H:i" }}</td>
                        <td>{{ record.permission_percentage }}%</td>
                        <td>{{ record.resale_level }}</td>
                        <td>{{ record.valid_days }}</td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="7" class="empty-state">
                            <i class="fas fa-inbox text-4xl mb-4"></i>
                            <p class="text-lg">暂无转售记录</p>
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        <!-- 返回动态授权页面按钮 -->
        <a href="{% url 'authorization_page' %}" class="btn-back">
            <i class="fas fa-arrow-left mr-2"></i>返回动态授权
        </a>

        <!-- 消息提示 -->
        {% if messages %}
        <div class="mt-6 space-y-4">
            {% for message in messages %}
            <div
                class="p-4 rounded-lg {% if message.tags == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <!-- 令牌复制函数 -->
    <script>
        // 点击新令牌单元格可复制令牌到剪贴板
        function copyToken(token) {
            navigator.clipboard.writeText(token);
            alert('令牌已复制到剪贴板！');
        }
    </script>
</body>

</html>